<template>
    <Editor v-model="content" :init="setting" />
</template>

<script lang="ts">
import request, { getHeader, getUploadUrl } from '@/config/request'
import aes from '@/utils/aesUtils'
import Editor from '@tinymce/tinymce-vue'

export default {
    name: 'vueTinymceEditor',
    components: { Editor },
   
    
    data() {
        return {
            content: this.value,
            
            setting: {
                menubar: true,  // 菜单栏
                //inline: true,   //开启内联模式
                readonly: false, // 只读
                toolbar:
                    "undo redo | fullscreen formatpainter  | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table emoticons | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | indent2em |superscript subscript | removeformat | wordcount code  ",
                toolbar_drawer: "sliding",
                quickbars_selection_toolbar: "removeformat formatpainter | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
                plugins: "fullscreen formatpainter link image media table lists quickbars wordcount emoticons code autoresize indent2em",
                language: 'zh-Hans',
                // autoresize_min_height: this.heigth, //编辑区域的最小高度
                height: 750,
                // 图片上传地址(自动上传)
                // images_upload_url: baseUploadUrl + 'image/vueTinymce/',
                // 允许粘贴图片上传,及格式
                paste_data_images: true,
                // automatic_uploads: false,
                images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
                // 此处为图片上传处理函数 (手动上传)
                images_upload_handler: (blobInfo: any, progress: any) => new Promise((resolve, reject) => {
                    const xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', getUploadUrl());
                    let header = getHeader() as any;
                    xhr.setRequestHeader('sign', header.sign);
                    xhr.setRequestHeader('Authorization', header.Authorization);
                    xhr.setRequestHeader('Platform', header.Platform);
                    xhr.upload.onprogress = (e) => {
                        progress(e.loaded / e.total * 100);
                    };

                    xhr.onload = () => {
                        if (xhr.status === 403) {
                            reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
                            return;
                        }

                        if (xhr.status < 200 || xhr.status >= 300) {
                            reject('HTTP Error: ' + xhr.status);
                            return;
                        }

                        const json = JSON.parse(xhr.responseText);
                        if (!json || typeof json.data != 'string') {
                            reject('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        resolve(aes.decrypt(json.data));
                    };

                    xhr.onerror = () => {
                        reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
                    };

                    const formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());

                    xhr.send(formData);
                }),
                // file_picker_callback: (callback, value, meta) => new Promise((resolve, reject) => {
                //     const xhr = new XMLHttpRequest();
                //     xhr.withCredentials = false;
                //     xhr.open('POST', getUploadUrl());
                //     let header = getHeader();
                //     xhr.setRequestHeader('sign', header.sign);
                //     xhr.setRequestHeader('Authorization', header.Authorization);
                //     xhr.setRequestHeader('Platform', header.Platform);
                //     xhr.upload.onprogress = (e) => {
                //         progress(e.loaded / e.total * 100);
                //     };

                //     xhr.onload = () => {
                //         if (xhr.status === 403) {
                //             reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
                //             return;
                //         }

                //         if (xhr.status < 200 || xhr.status >= 300) {
                //             reject('HTTP Error: ' + xhr.status);
                //             return;
                //         }

                //         const json = JSON.parse(xhr.responseText);
                //         if (!json || typeof json.data != 'string') {
                //             reject('Invalid JSON: ' + xhr.responseText);
                //             return;
                //         }
                //         resolve(aes.decrypt(json.data));
                //     };

                //     xhr.onerror = () => {
                //         reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
                //     };

                //     const formData = new FormData();
                //     formData.append('file', blobInfo.blob(), blobInfo.filename());

                //     xhr.send(formData);
                //  }),

            },
            tinymceCDN :window.location.origin + '/tinymce',
        }
    },
    model: {
        prop: "value",
        event: 'input'
    },
    props: {
        // 接收值父组件传递值
        value: {
            type: String,
            default: () => {
                return ''
            }
        },
        heigth: {
            type: Number,
            default: () => {
                return 350
            }
        }
    },
    watch: {
        value(newValue) {
            this.content = newValue;
        },
        content(newValue) {
            this.$emit("input", newValue);
        }
    }
}
</script>
<style>
/* 富文本按钮功能优先级,最好 > 2500  弹出默认2000+ */
.tox-tinymce-aux {
    z-index: 9999 !important;
}
</style>
